<template>
    <div class="Personal">
        <a-layout>
            <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
                <div class="logo"><ant-design-outlined /></div>
                <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
                    <template v-for="(item) in personalChildren" :key="item.path">
                        <a-sub-menu v-if="item.children">
                            <template #title>
                                <span @click="toRouterPush(item.name)">
                                    <span>{{ item.meta.name }}</span>
                                </span>
                            </template>
                            <template
                                v-for="(childrenItem) in item.children"
                                :key="childrenItem.path"
                            >
                                <a-menu-item
                                    @click="toRouterPush(childrenItem.name)"
                                >{{ childrenItem.meta.name }}</a-menu-item>
                            </template>
                        </a-sub-menu>
                        <a-menu-item v-else @click="toRouterPush(item.name)" :key="item.path">
                            <span>{{ item.meta.name }}</span>
                        </a-menu-item>
                    </template>
                </a-menu>
            </a-layout-sider>
            <a-layout>
                <a-layout-header style="background: #fff; padding: 0;">
                    <menu-unfold-outlined
                        v-if="collapsed"
                        class="trigger"
                        @click="() => (collapsed = !collapsed)"
                    />
                    <menu-fold-outlined
                        v-else
                        class="trigger"
                        @click="() => (collapsed = !collapsed)"
                    />
                    <a-breadcrumb  style="float: left;line-height: 64px;">
                        <a-breadcrumb-item>
                            <router-link tag="a" :to="{name:'Home'}">Home</router-link>
                        </a-breadcrumb-item>
                        <a-breadcrumb-item v-for="{name,index} in this.$route.matched" :key="index">
                            <router-link tag="a" :to="{name:name}">{{name}}</router-link>
                        </a-breadcrumb-item>
                    </a-breadcrumb>
                </a-layout-header>
                <a-layout-content
                    :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
                >
                    <router-view />
                </a-layout-content>
            </a-layout>
        </a-layout>
    </div>
</template>

<script>
import {AntDesignOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import personalChildren from '../router/personal'
export default {
    name: "Personal",
    data() {
        return {
            selectedKeys: ["1"],
            collapsed: false,
        };
    },
    methods: {
        toRouterPush(param) {
            if (typeof param === 'string') {
                this.$router.push({
                    name: param
                })
            }
            if (typeof param === 'object') {
                this.$router.push(param)
            }
        }
    },
    components: {
        MenuUnfoldOutlined,
        MenuFoldOutlined,
        AntDesignOutlined
    },
    // 根据路由进入组件的导航守卫
    beforeRouteEnter(to, from, next) {
        next(vm => {
            if (!vm.isLogin) {
                vm.$router.push('/login')
            }
        })
    },
    computed: {
        isLogin() {
            return this.$cookies.get("isLogin")
        },
        personalChildren() {
            return personalChildren.filter((item) => item.meta.isLeft)
        }
    },
};
</script>

<style lang="scss" scoped>
.ant-layout-has-sider {
    min-height: 100vh;
}

.trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    float: left;
    transition: color 0.3s;
}

.trigger:hover {
    color: #1890ff;
}

.logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.3);
    margin: 16px;
    text-align: center;
    color: #fff;
    line-height: 32px;
    font-size: 18px;
}

.site-layout .site-layout-background {
    background: #fff;
}
</style>
